import Taro,{ Component,Config } from "@tarojs/taro";
import { View,Text,Video } from "@tarojs/components";
import {AtActivityIndicator } from "taro-ui";
import './index.scss';

interface advance {
  title:string,  //标题
  image:string,  //封面图
  vId:number,  //视频id
  commentTotal:string,  //评论数量
  playCount:string,  //播放次数
  length:number,  //视频长度(秒)
}
export default class VideoList extends Component{
  config:Config = {
    navigationBarTitleText:'视频列表',
  }
  state = {
    Item:[],
    videoList:[],  //视频480P
    newVideoList:[],  //视频720P
    advanceValue:[],  //基础信息
    getSysInfo:300,  //获取设备宽度
  }
  componentWillMount(): void {
    const _this = this;
    Taro.getSystemInfo({
      success:function(res){
        console.log(res,'设备信息');
        _this.setState({
          getSysInfo:res.screenWidth
        })
      }
    })
  }

  componentDidMount(): void {
    console.log(this.$router.params);
    this._getList(this.$router.params.MovieId);
  }
  _getList = (movieId)=>{
    let _this = this;
    Taro.cloud.callFunction({
      name:'https',
      data:{
        url:`https://video-topic-m.mtime.cn/api/proxy/ticket/movie/category/video.api?movieId=${movieId}&pageIndex=1&type=-1`
      }
    }).then((res)=>{
      const result = JSON.parse(res.result);
      console.log(result,'视频列表');
      const value = result.data.videoList;
      this.setState({
        advanceValue:value
      })
      value.map((item)=>{
        _this._getVideoDetails(item.vId,item.videoSource).then(res=>{
          console.log(res);
          let item = res.data.playUrlList[0];
          let newItem = res.data.playUrlList[1];
          // videoList.push(res.data.playUrlList[0]);
          // newVideoList.push(res.data.playUrlList[1]);
          let videoListValue = _this.state.videoList.concat(item);
          let newVideoListValue = _this.state.newVideoList.concat(newItem);
          _this.setState({
            videoList:videoListValue,
            newVideoList:newVideoListValue
          })
        });
      })
      console.log(this.state.videoList);
    })
  }
  _getVideoDetails = (id,source)=>{
    return Taro.cloud.callFunction({
      name:'https',
      data:{
        url:`https://shortvideo.mtime.cn/play/getPlayUrl?videoId=${id}&source=1&scheme=https`
      }
    }).then(res=>{
       return JSON.parse(res.result);
    })
  }
  render(){
    let value = this.state.newVideoList;
    let advanceValue:advance = this.state.advanceValue;
    let ItemList:JSX.Element[] | JSX.Element;
      if(value){
        ItemList = value.map((item,index)=>{
          return (
            <View key={index}>
              <Video
                src={item.url}
                controls={true}
                enablePlayGesture={true}
                showMuteBtn={true}
                autoplay={false}
                poster={advanceValue[index].image}
                initialTime='0'
                id='video'
                loop={false}
                muted={false}
                title={advanceValue[index].title}
              />
              <View className='VideoView'>
                <Text className='VideoTitle'>{advanceValue[index].title}</Text>
                <View className='at-row'>
                  <View className='at-col-8'>
                    <Text>{advanceValue[index].playCount} 播放</Text>
                  </View>
                  <View className='at-col-4'>
                    {
                      advanceValue[index].commentTotal?
                        <Text>{advanceValue[index].commentTotal} 条评论</Text>:""
                    }
                  </View>
                </View>
              </View>
            </View>
          )
        })
      }
    return (
      <View className='containerValue'>
        {ItemList}
        {
          value.length>0?"":
            <AtActivityIndicator content='加载中...' mode='center'></AtActivityIndicator>
        }
      </View>
    )
  }
}
